<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 100px;
            height: 100px;
        }

        .list {
            list-style: none;
            display: inline-block;
            padding: 5px 8px;
            border: 1px solid #ccc;
        }

        .list-text li {
            list-style: none;
            display: inline-block;
        }

        .shopping li {
            list-style: none;
        }
    </style>
</head>

<body>
    <h2>商品列表</h2>
    <div class="list">空调</div>
    <div class="list">平板电视</div>
    <ul class="list-text">
    </ul>
    <h1>购物车列表</h1>
    <ul class="shopping">
    </ul>
    <h5>总价<span class="all_price">0</span></h5>
    <button onclick="dele()">删除选中</button>
    购物车全选<input type="checkbox" class="shopping_all">
    购物车反选<input type="checkbox" class="shopping_all_first">
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        var obj = [{
            pid: 0,
            id: 1,
            img: "./微信截图_20250321181734.png1.png",
            price: 6599,
        }, {
            pid: 1,
            id: 2,
            img: "./微信截图_20250321181816.png2.png",
            price: 1499,
        }, {
            pid: 0,
            id: 3,
            img: "./微信截图_20250321181926.png3.png",
            price: 1499,
        }, {
            pid: 1,
            id: 4,
            img: "./微信截图_20250321181938.png4.png",
            price: 1499,
        }, {
            pid: 0,
            id: 5,
            img: "./微信截图_20250321181948.png5.png",
            price: 1499,
        }, {
            pid: 0,
            id: 6,
            img: "./微信截图_20250321181953.png6.png",
            price: 1499,
        }]
    </script>
    <script>
        //默认状态
        $(".list-text").html("")
        obj.forEach(i => {
            if (i.pid == 0) {
                $(".list-text").append(`
                                <li><img src="${i.img}" alt=""><span>价格$${i.price}</span>
                                     <button onclick="shopping_add(${i.id})">添加到购物车</button></li>
                        `)
            }
        })
    </script>
    <script>
        //渲染
        function shopping_list_apply() {
            $(".list").each((index, item) => {
                item.addEventListener("click", () => {
                    $(".list-text").html("")
                    obj.forEach(i => {
                        if (i.pid == index) {
                            $(".list-text").append(`
                                <li><img src="${i.img}" alt=""><span>价格$${i.price}</span>
                                       <button onclick="shopping_add(${i.id})">添加到购物车</button></li>
                        `)
                        }
                    })
                })
            })
        }
        shopping_list_apply()
    </script>
    <script>
        //购物车渲染
        function shopping_apply() {
            $(".shopping").html("")
            shopping_arr.forEach(item => {
                $(".shopping").append(`
                 <li>    <input type="checkbox" ${item.is ? "checked" : ""} onclick="shopping_price(${item.id})"><img src="${item.img}" alt=""><span>价格$${item.price}</span>
                        <button onclick="shopping_minus_price(${item.id})">-</button>
    <span>${item.nums}</span>
    <button onclick="shopping_add_price(${item.id})">+</button></li>
                `)
            })
        }
    </script>
    <script>
        //添加到购物车
        var shopping_arr = []
        function shopping_add(id) {
            var index = obj.find(item => item.id == id)
            shopping_arr.push({
                id: shopping_arr.length + 1,
                pid: shopping_arr.length,
                img: index.img,
                price: index.price,
                nums: 1,
                is: false
            })
            shopping_apply()
        }
    </script>
    <script>
        //总价++
        function shopping_add_price(id) {
            var index = shopping_arr.findIndex(item => item.id == id)
            shopping_arr[index].nums++
            shopping_apply()
            shopping_price_all()
        }
    </script>
    <script>
        //总价--
        function shopping_minus_price(id) {
            var index = shopping_arr.findIndex(item => item.id == id)
            if (shopping_arr[index].nums != 0) {
                shopping_arr[index].nums--
            }
            shopping_apply()
            shopping_price_all()
        }
    </script>
    <script>
        //总价渲染
        function shopping_price_all() {
            var num = 0
            shopping_arr.forEach(item => {
                if (item.is) {
                    num += item.price * item.nums
                }
                $(".all_price").html(num)
            })
        }
    </script>
    <script>
        //购物车选中价格渲染
        function shopping_price(id) {
            var index = shopping_arr.find(item => item.id == id)
            index.is = event.target.checked
            shopping_price_all()
        }
    </script>
    <script>
        //购物车全选
        $(".shopping_all").on("click", () => {
            $(".shopping input").each((index, item) => {
                item.checked = event.target.checked
                shopping_arr.forEach(i => {
                    i.is = event.target.checked
                    shopping_price_all()
                })
            })
        })
    </script>
    <script>
        //购物车全选
        $(".shopping_all_first").on("click", () => {
            $(".shopping input").each((index, item) => {
                item.checked = !item.checked
                shopping_arr.forEach(it => {
                    it.is = !item.checked
                    shopping_price_all()
                })
            })
        })
    </script>
</body>

</html>